<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        width: 100%;
        height: 100%;
        /* background-color: antiquewhite; */
        display: flex;
        /* justify-content: center; */
        flex-wrap: wrap;
        align-items: center;
    }

    .head {
        width: 100%;
        height: 100px;
        background-color: #3c8cff;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        top: 0;
        left: 0;
    }

    .tu {
        width: 200px;
        height: 100px;
        /* background: antiquewhite; */
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    img {
        height: 45px;
    }

    .nav {
        width: 60%;
        height: 100px;
        font-size: 18px;
        color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    #nav-item {
        list-style: none;
        float: left;
    }

    #mission {
        position: absolute;
        top: 100px;
        left: 83px;
        width: 283px;
        height: 347px;
        padding: 10px 34px 10px;
        background-color: #fff;
        border-bottom-right-radius: 137px;
        z-index: 1;
    }

    .mission {
        width: 300px;
        height: 40px;
        font-size: 25px;
        color: #828282;
        padding-top: 70px;
    }

    .desc1 {
        width: 300px;
        height: 100px;
        font-size: 60px;
        color: #000;
        font-weight: 200px;
        margin-top: 10px;
    }

    .middle {
        width: 100%;
        height: 2300px;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;

    }

    .swiper {
        width: 100%;
        height: 34%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .swiper-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .swiper-pagination span {
        width: 20px;
        height: 20px;
    }

    .one {
        width: 100%;
        height: 600px;
        /* background-color: antiquewhite; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .enterprise {
        width: 30%;
        height: 600px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .qi {
        width: 85%;
        height: 200px;
        /* background-color: #fff; */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .qi h1 {
        width: 100%;
        height: 100px;
        font-size: 50px;
    }

    .qi p {
        width: 100%;
        height: 100px;
        font-size: 18px;
    }

    .Carousel {
        width: 50%;
        height: 600px;
        /* background-color: aqua; */
    }


    #swiper1 {
        width: 100%;
        height: 100%;
    }

    #slide {
        text-align: center;
        font-size: 14px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    /* #slide img {
        display: block;
        width: 100%;
        height: 20%;
        object-fit: cover;
    } */

    #slide dt img {
        width: 100%;
        height: 360px;
    }

    /* .swiper-slide dd p{
        flex-direction: row
    } */
    .zh-desc {
        line-height: 20px;
    }

    .desc {
        width: 520px;
        height: 20px;
        font-size: 20px;
        margin-left: 100px;
        /* color: #000;
        font-weight: 200px;
        margin-top: 10px; */
    }

    #slide dd p {
        font-size: 30px;
        font-weight: 600;
        margin-left: -350px;
        position: relative;
    }


    .swiper-button-next {
        position: absolute;
        top: 75%;
        right: 15%;
    }

    .swiper-button-prev {
        position: absolute;
        top: 75%;
        left: 12%;
    }

    .two {
        width: 100%;
        height: 600px;
        /* background-color: antiquewhite; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .picture {
        width: 50%;
        height: 600px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .picture img {
        width: 90%;
        height: 75%;
    }

    .behavior {
        width: 30%;
        height: 600px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .xing {
        width: 85%;
        height: 300px;
        /* background-color: aqua; */
        display: flex;
        flex-wrap: wrap;
        /* align-items: center; */
    }

    .xing h1 {
        width: 100%;
        height: 100px;
        font-size: 50px;
    }

    .xing p {
        width: 100%;
        height: 100px;
        font-size: 18px;
    }

    .xing div a {
        width: 100%;
        height: 100px;
        text-decoration: none;
        color: #569CFE;
    }

    .thr {
        width: 100%;
        height: 500px;
        /* background-color: antiquewhite; */
        display: flex;
        /* justify-content: center; */
        flex-direction: row-reverse;
        flex-wrap: wrap;
        align-items: center;
    }

    .contact {
        width: 90%;
        height: 100px;
        /* background-color: aquamarine; */
        display: flex;
        /* justify-content: center; */
        flex-direction: row;
        align-items: center;
    }

    .er {
        width: 90%;
        height: 400px;
        /* background-color: aquamarine; */
        display: flex;
        /* justify-content: center; */
        flex-direction: row;
        align-items: center;
    }

    .ee {
        width: 40%;
        height: 400px;
        /* background-color: aqua; */
        line-height: 35px;
    }

    .lee {
        width: 40%;
        height: 400px;
        /* background-color: aqua; */
        line-height: 35px;
    }

    .uu{
        color: #3c8cff;
    }

    .footer {
        width: 100%;
        height: 360px;
        background-color: #3c8cff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .zhao {
        width: 200px;
        height: 100px;
        /* background: antiquewhite; */
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .zhao img {
        height: 45px;
    }
    
    .nav-wrapper{
        width: 60%;
        height: 200px;
        /* background-color: aqua; */
        color: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .nv{
        width: 20%;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
    }

</style>

<body>
    <div class="box">
        <div class="head">
            <div class="tu">
                <img src="img/微信截图_20220624160331.png" alt="">
            </div>
            <ul class="nav">
                <li class="nav-item" id="nav-item">关于我们</li>
                <li class="nav-item" id="nav-item">我们的产品</li>
                <li class="nav-item" id="nav-item">新闻动态</li>
                <li class="nav-item" id="nav-item">企业社会责任</li>
                <li class="nav-item" id="nav-item">加入我们</li>
            </ul>
        </div>
        <div class="middle">
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="img/1.png"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/2.png"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/3.png"
                            alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="img/4.png"
                            alt="">
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div id="mission">
                <p class="mission">使命</p>
                <p class="desc1">激发创造 丰富生活</p>
            </div>
            <div class="one">
                <div class="enterprise">
                    <div class="qi">
                        <h1>企业文化</h1>
                        <p>字节范是字节跳动企业文化的重要组成部分，是我们共同认可的行为准则。</p>
                    </div>

                </div>
                <div class="Carousel">
                    <!-- Swiper -->
                    <div class="swiper mySwiper1" id="swiper1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" id="slide">
                                <dl>
                                    <dt>
                                        <img src="img/5.jpg"
                                            alt="">
                                    </dt>
                                    <dd>
                                        <p class="title">追求极致</p>
                                        <ul class="desc-container">
                                            <li class="desc zh-desc">不断提高要求，延迟满足感</li>
                                            <li class="desc zh-desc">在更大范围里找最优解</li>
                                            <li class="desc zh-desc">不放过问题，思考本质</li>
                                            <li class="desc zh-desc">持续学习和成长</li>
                                        </ul>
                                    </dd>
                                </dl>
                            </div>
                            <div class="swiper-slide" id="slide">
                                <dl>
                                    <dt>
                                        <img src="img/6.jpg"
                                            alt="">
                                    </dt>
                                    <dd>
                                        <p class="title">务实敢为</p>
                                        <ul class="desc-container">
                                            <li class="desc zh-desc">直接体验，深入事实</li>
                                            <li class="desc zh-desc">不自嗨，注重效果</li>
                                            <li class="desc zh-desc">能突破有担当，打破定式</li>
                                            <li class="desc zh-desc">尝试多种可能，快速迭代</li>
                                        </ul>
                                    </dd>
                                </dl>
                            </div>
                            <div class="swiper-slide" id="slide">
                                <dl>
                                    <dt>
                                        <img src="img/7.jpg"
                                            alt="">
                                    </dt>
                                    <dd>
                                        <p class="title">开放谦逊</p>
                                        <ul class="desc-container">
                                            <li class="desc zh-desc">内心阳光，信任伙伴</li>
                                            <li class="desc zh-desc">乐于助人和求助，合作成大事</li>
                                            <li class="desc zh-desc">格局大，上个台阶想问题</li>
                                            <li class="desc zh-desc">对外敏锐谦虚，ego小，听得进意见</li>
                                        </ul>
                                    </dd>
                                </dl>
                            </div>
                            <div class="swiper-slide" id="slide">
                                <dl>
                                    <dt>
                                        <img src="img/8.jpg"
                                            alt="">
                                    </dt>
                                    <dd>
                                        <p class="title">坦诚清晰</p>
                                        <ul class="desc-container">
                                            <li class="desc zh-desc">敢当面表达真实想法</li>
                                            <li class="desc zh-desc">能承认错误，不装不爱面子</li>
                                            <li class="desc zh-desc">实事求是，暴露问题，反对“向上管理”</li>
                                            <li class="desc zh-desc">准确、简洁、直接，有条理有重点</li>
                                        </ul>
                                    </dd>
                                </dl>
                            </div>
                            <div class="swiper-slide" id="slide">
                                <dl>
                                    <dt>
                                        <img src="img/9.jpg"
                                            alt="">
                                    </dt>
                                    <dd>
                                        <p class="title">始终创业</p>
                                        <ul class="desc-container">
                                            <li class="desc zh-desc">自驱，不设边界，不怕麻烦</li>
                                            <li class="desc zh-desc">有韧性，直面现实并改变它</li>
                                            <li class="desc zh-desc">拥抱变化，对不确定性保持乐观</li>
                                            <li class="desc zh-desc">始终像公司创业第一天那样思考</li>
                                        </ul>
                                    </dd>
                                </dl>
                            </div>
                            <div class="swiper-slide" id="slide">
                                <dl>
                                    <dt>
                                        <img src="img/10.jpg"
                                            alt="">
                                    </dt>
                                    <dd>
                                        <p class="title">多元兼容</p>
                                        <ul class="desc-container">
                                            <li class="desc zh-desc">理解并重视差异和多元，建立火星视角</li>
                                            <li class="desc zh-desc">打造多元化的团队，欢迎不同背景的人才，激发潜力</li>
                                            <li class="desc zh-desc">鼓励人人参与，集思广益，主动用不同的想法来挑战自己</li>
                                            <li class="desc zh-desc">创造海纳百川，兼容友好的工作环境</li>
                                        </ul>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        <!-- <div class="swiper-pagination"></div> -->
                    </div>
                </div>
            </div>
            <div class="two">
                <div class="picture">
                    <img src="img/11.jpeg"
                        alt="">
                </div>
                <div class="behavior">
                    <div class="xing">
                        <h1>行为准则</h1>
                        <p>字节跳动相信，在企业发展过程中，高道德标准和诚信文化发挥着关键作用。因此，我们制定了字节跳动行为准则和字节跳动合作伙伴行为准则。</p>
                        <div>了解更多 <a href="">→</a> </div>
                    </div>
                </div>
            </div>
            <div class="thr">
                <div class="contact">
                    <h1 id="fftty">联系下我们</h1>
                </div>

                <div class="er">
                    <div class="ee">
                        <div class="divtt">
                            <h3>媒体问询</h3>
                            <p class="uu">gongguan@bytedance.com</p>
                        </div>
                        <div class="divtt">
                            <h3>商务合作</h3>
                            <p class="uu">bd@bytedance.com</p>
                        </div>
                        <div class="divtt">
                            <h3>廉洁 <span style="color: #3c8cff;">举报</span></h3>
                            <p class="uu">clean@bytedance.com</p>
                        </div>

                    </div>
                    <div class="lee">
                        <div class="divtt">
                            <h3>招聘相关</h3>
                            <p class="uu">hr@bytedance.com</p>
                        </div>
                        <div class="divtt">
                            <h3>广告合作</h3>
                            <p class="uu">www.oceanengine.com</p>
                        </div>


                    </div>
                </div>

            </div>
        </div>
        <div class="footer">
            <div class="zhao">
                <img src="img/微信截图_20220624160331.png" alt="">
            </div>
            <div class="jsx-3066022125 nav-wrapper">
                <div class="jsx-3066022125 nv">
                    <p class="jsx-3066022125 title">关于我们</p>
                    <p>
                        <a class="">企业文化</a>
                    </p>
                    <p>
                        <a class="">行为准则</a>
                    </p>
                    <p>
                        <a class="">大事记</a>
                    </p>
                    <p>
                        <a class="">我们的产品</a>
                    </p>
                    <p>
                        <a class="">联系我们</a>
                    </p>
                </div>
                <div class="jsx-3066022125 nv">
                    <p class="jsx-3066022125 title">新闻动态</p>
                    <p>
                        <a class="">公司新闻</a>
                    </p>
                    <p>
                        <a class="">数据报告</a>
                    </p>
                </div>
                <div class="jsx-3066022125 nv">
                    <p class="jsx-3066022125 title">企业社会责任</p>
                    <p>
                        <a class="">企业社会责任报告</a>
                    </p>
                    <p>
                        <a class="">优质内容创造社会价值</a>
                    </p>
                    <p>
                        <a class="">信息助力公益新思路</a>
                    </p>
                    <p>
                        <a class="">可持续发展的经营与管理</a>
                    </p>
                    <p>
                        <a class="">维护健康的网络生态平台</a>
                    </p>
                </div>
                <div class="jsx-3066022125 nv" id="jia">
                    <p class="jsx-3066022125 title">加入我们</p>
                    <p><a class="external">招聘官网</a></p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
    });

    var swiper = new Swiper("#swiper1", {
        slidesPerView: 1,
        spaceBetween: 30,
        keyboard: {
            enabled: true,
        },
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true,
        // },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

</script>

</html>